<template>
  <div>
    <div style="margin-bottom: 20px;">
      <el-button type="primary" @click="handleReadAll">一键已读</el-button>
    </div>
    <el-timeline>
      <el-timeline-item
        v-for="alert in alerts"
        :key="alert.id"
        :timestamp="alert.createTime"
        :type="getAlertType(alert.alertType)"
        :icon="getAlertIcon(alert.alertType)"
        @click.native="handleMarkAsRead(alert)"
        style="cursor: pointer;"
      >
        <el-card :class="{ 'unread-alert': alert.isRead === 0 }">
          <h4>{{ alert.alertTitle }}</h4>
           <p>单号：{{ alert.orderNo }}</p>
          <p>{{ alert.alertContent }}</p>
        </el-card>
      </el-timeline-item>
    </el-timeline>
  </div>
</template>

<script>
import { listAlerts, readAllAlerts, markAlertAsRead } from '@/api/system/alert';

export default {
  name: "OrderAlerts",
  data() {
    return {
      alerts: []
    };
  },
  created() {
    this.getAlertList();
  },
  methods: {
    getAlertList() {
      listAlerts().then(response => {
        this.alerts = response.rows;
      });
    },
    handleReadAll() {
      readAllAlerts().then(() => {
        this.$message.success('所有通知已标记为已读');
        // Optimistically update UI
        this.alerts.forEach(alert => {
          if (alert.isRead === 0) {
            alert.isRead = 1;
          }
        });
      });
    },
    handleMarkAsRead(alert) {
      if (alert.isRead === 0) {
        markAlertAsRead(alert.id).then(() => {
          alert.isRead = 1;
          this.$message.success(`通知 "${alert.alertTitle}" 已标记为已读`);
        });
      }
    },
    getAlertType(type) {
      const typeMap = {
        'DEADLINE_WARNING': 'danger',
        'CANCELLATION_APPROVED': 'success',
        'NEW_TASK_RECOMMENDATION': 'primary'
      };
      return typeMap[type] || 'info';
    },
    getAlertIcon(type) {
      const iconMap = {
        'DEADLINE_WARNING': 'el-icon-warning',
        'CANCELLATION_APPROVED': 'el-icon-check',
        'NEW_TASK_RECOMMENDATION': 'el-icon-present'
      };
      return iconMap[type] || 'el-icon-info';
    }
  }
};
</script>

<style scoped>
.unread-alert {
  background-color: #f0f9ff;
  border-color: #abdcff;
}
</style> 